import { List } from "antd";
import { Autoplay, Pagination } from "swiper/modules";
// import "swiper/modules/pagination/pagination.min.css";
import "swiper/css";
import { Swiper, SwiperSlide } from "swiper/react";
import "./index.less";

// SwiperCore.use([Autoplay, Pagination]);

// 将数据分页
export const getGroupList = (list: any[], pageSize: number) => {
  if (!list) return [];
  const pageCount = Math.ceil(list.length / pageSize);
  return Array(pageCount)
    .fill("_")
    .map((_, index) => list.slice(index * pageSize, index * pageSize + pageSize));
};

// list: 数据列表 renderItem: 每页渲染Item pageSize: 每页条数
export const ListSwiper = (props: any) => {
  const { list, renderItem, pageSize = 8, swiperClassName, ...rest } = props;

  const groupList = getGroupList(list, pageSize);
  return (
    <MySwiper className={swiperClassName} {...rest}>
      {groupList.map((group, index) => {
        return (
          <SwiperSlide key={index}>
            <List className="list-box" dataSource={group} renderItem={renderItem} />
          </SwiperSlide>
        );
      })}
    </MySwiper>
  );
};

const MySwiper = (props: any) => {
  const { children, swiperClassName, ...rest } = props;

  return (
    <Swiper
      pagination={{
        clickable: true,
      }}
      modules={[Autoplay, Pagination]}
      speed={500}
      autoplay={{
        delay: 4500, // 默认延迟5s播放下一张
        stopOnLastSlide: false, // 播放到最后一张时停止
        disableOnInteraction: false, // 用户操作轮播图后停止
        pauseOnMouseEnter: true,
      }}
      // simulateTouch={false}
      simulateTouch={true}
      loop
      className={swiperClassName}
      {...rest}
    >
      {children}
    </Swiper>
  );
};

export default MySwiper;
